<template>
	<div style="margin:92px 0 0 52px;">
    <div class="breadcrumb-father">
      <div class="new-breadcrumb">
        <!-- <i><img src="../../assets/imgs/Home.png" alt=""></i> -->
        <router-link  :to="{path:'/welcome'}">
          <img src="../../assets/imgs/Home.png" alt="">
        </router-link>
        <!-- <a href="javascript:void(0)">
        </a> -->
        <span>{{$t('ad.adMgmt')}}</span>
        <span class="arrow">></span>
        <!-- <a href="javascript:void(0)">
        </a> -->
          <span>{{$t('ad.adSetup')}}</span>
      </div>
    </div><!-- breadcrumb-father结束 -->

    <div class="handle_box">
        <ul class="anchors_ul">
            <a href="javascript:void(0)"><li :class="{'active': type_tab}" @click="toggle(1)">{{$t('hint.paymentPage')}}</li></a>
            <a href="javascript:void(0)"><li :class="{'active': !type_tab}" @click="toggle(2)">{{$t('hint.aPPHomePage')}}</li></a>
        </ul><!-- anchors_ul结束 -->
    </div><!-- handle_box结束 -->

    <!-- 防止表格层被遮挡 -->
    <div style="height: 33px;"></div>

    <div class="ad-wrapper-div">
        <!-- 广告列表层 -->
      <div class="ad-cards" v-for=" (item,index) in ad_list_data " :key="index">
        <div class="ad-card-div" @mouseenter="showOrHideSvg(1,index)" @mouseleave="showOrHideSvg(2,index)">

          <div class="ad-img">
            <img :src="item.imageUrl" :id=" 'imageUrl-' + index " />
            <div class="btn-div" :id=" 'btn-div-' + index " v-if=" userPhone === '13501189583' || userPhone === '15018955912' || userPhone === '15219441946' ? false : true " >
              <span @click="modifyOrCancelAD(1,index,item)" ><icon-svg icon-class="guanggaoxiugai" class="icon-btn edit"></icon-svg></span>
              <span @click="showOrHideDelView(1,index)" v-show=" !(ad_list_data.length==1) " ><icon-svg icon-class="shanchuguanggao" class="icon-btn delete"></icon-svg></span>
            </div>

            <div class="shadow-div" :id=" 'shadow-div-' + index " >
                <el-upload action="/api/share/picture/upload" accept="image/jpeg,image/png,image/png" :before-upload="beforeImgUpload" :show-file-list="false" :on-success="modifyADSuccess" name="upfile" list-type="picture" :headers="headers">
                    <div class="content">
                        <div class="svg-pic">
                            <icon-svg icon-class="tupianxiugai" class="icon-btn uploadImg"></icon-svg>
                        </div>
                        <span>{{ $t('ad.Replacethepicture') }}</span>
                    </div>
                </el-upload>
            </div>
          </div><!-- ad-img结束 -->

          <div class="ad-content ad-content-view" :id=" 'ad-content-view-' + index " >
            <div class="title">
              <span :id=" 'title-span-' + index ">{{item.description}}</span>
            </div>
            <div class="cont">
              <div class="left">{{ $t('ad.BusinessNature') }}{{ $t('button.colon') }}</div>
              <div class="right" :title="locale == 'en'? item.industryEnName : item.industryName">{{ locale == 'en'? item.industryEnName : item.industryName }}</div>
            </div>
            <div class="cont">
              <div class="left">{{ $t('ad.Link') }}{{ $t('button.colon') }}</div>
              <div class="right" :id=" 'ad-link-' + index ">{{item.adUrl}}</div>
            </div>
          </div><!-- ad-content-view结束 -->

          <div class="ad-content ad-content-edit" :id=" 'ad-content-edit-' + index ">
            <div class="cont">
              <div class="left">{{ $t('ad.AdvertisementName') }}{{ $t('button.colon') }}</div>
              <div class="right"><input type="text" name="" v-model="modify_AD_data.description" maxlength="100" /></div>
            </div>
            <div class="cont">
              <div class="left">{{ $t('ad.BusinessNature') }}{{ $t('button.colon') }}</div>
              <div class="right">
                <el-select v-model="modify_AD_data.industry" popper-class="el-select-custom" clearable>
                    <el-option v-for="(item,index) in queryIndustryObj_ad" :key="index" :label="item.industryName" :value="item.industryCode">
                    </el-option>
                </el-select>
              </div>
            </div>
            <div class="cont">
              <div class="left">{{ $t('ad.Link') }}{{ $t('button.colon') }}</div>
              <div class="right"><input type="text" name="" v-model="modify_AD_data.adUrl" maxlength="1000" /></div>
            </div>
            <div class="btns">
              <button class="cancel-btn" @click="modifyOrCancelAD(2,index)">{{ $t('button.Cancel') }}</button>
              <button class="confirm-btn" @click="confirmModify(index)" >{{ $t('button.OK') }}</button>
            </div>
          </div><!-- ad-content-edit结束 -->
        </div><!-- ad-card-div结束 -->

        <div class="del" :id=" 'del-' + index ">
          <div class="cont">{{ $t('ad.ConfirmtodeletetheAdvertisement') }}</div>
          <button @click="delAD(item.id,index)" class="confirm-btn">{{ $t('button.OK') }}</button>
          <button @click="showOrHideDelView(2,index)" class="cancel-btn">{{ $t('button.Cancel') }}</button>
        </div><!-- del结束 -->

      </div><!-- ad-cards结束 -->


      <!-- 新增广告层 -->
      <div class="ad-cards" v-show=" show_new_AD ">
        <div class="ad-card-div">

          <div class="ad-img">
            <img :src="add_AD_data.imageUrl" />
            <div class="shadow-div add-div">
                <el-upload action="/api/share/picture/upload" accept="image/jpeg,image/png,image/png" :before-upload="beforeImgUpload" :show-file-list="false" :on-success="addADSuccess" name="upfile" list-type="picture" :headers="headers">
                    <div class="content" id="upload-concent">
                        <icon-svg icon-class="shangchuantupian" class="icon-btn pic-svg-class"></icon-svg>
                        <span>{{ $t('ad.Uploadpicture') }}</span>
                    </div>

                    <div class="content" id="changePic">
                        <div class="svg-pic">
                            <icon-svg icon-class="tupianxiugai" class="icon-btn uploadImg"></icon-svg>
                        </div>
                        <span>{{ $t('ad.Replacethepicture') }}</span>
                    </div>

                </el-upload>
            </div>
          </div><!-- ad-img结束 -->

          <div class="ad-content ad-content-edit">
            <div class="cont">
              <div class="left" id="description" >{{ $t('ad.AdvertisementName') }}{{ $t('button.colon') }}</div>
              <div class="right"><input type="text" name="" v-model.lazy="add_AD_data.description" maxlength="100" /></div>
            </div>
            <div class="cont">
              <div class="left" id="industry" >{{ $t('ad.BusinessNature') }}{{ $t('button.colon') }}</div>
              <div class="right">
                <el-select v-model.lazy="add_AD_data.industry" popper-class="el-select-custom" clearable>
                    <el-option v-for="(item,index) in queryIndustryObj_ad" :key="index" :label="item.industryName" :value="item.industryCode">
                    </el-option>
                </el-select>
              </div>
            </div>
            <div class="cont">
              <div class="left" >{{ $t('ad.Link') }}{{ $t('button.colon') }}</div>
              <div class="right"><input type="text" name="" v-model.lazy="add_AD_data.adUrl" maxlength="1000" /></div>
            </div>
            <div class="btns">
              <button class="cancel-btn" @click="cancelAdd">{{ $t('button.Cancel') }}</button>
              <button class="confirm-btn" @click="confirmAD">{{ $t('button.OK') }}</button>
            </div>
          </div><!-- ad-content-edit结束 -->

          <div class="fore-div" v-show="foreShow">
            <div class="circle" @click="newAd()">
              <span>{{ $t('ad.NewAdvertisement') }}</span>
            </div>
          </div><!-- fore-div结束 -->
        </div><!-- ad-card-div结束 -->
      </div><!-- ad-cards结束 -->

    </div><!-- ad-wrapper-div结束 -->

  </div>
</template>

<script>
import {addAdvert, selectAdList, getAdvert_home,updateAd,deleteAd} from "api/ad/index";

export default {
  data() {
    return {
      headers: { "access-token": sessionStorage.getItem("access-token") },
      companyId: localStorage.getItem('companyId'),
      userPhone:localStorage.getItem('phone'),
      locale:localStorage.getItem('locale'),
      queryIndustryObj_ad:JSON.parse(localStorage.getItem('queryIndustryObj_ad')),
      type_tab: true,
      foreShow: true,
      ad_list_data:[],
      modify_AD_data:{},
      cancel_AD_data:{},
      modifyIndex:null,
      delIndex:null,
      add_AD_data:{
          description:undefined,
          industry:undefined,
          imageUrl:undefined,
          adUrl:undefined,
          type:undefined,
      },
      show_new_AD:false,
    };
  },
  created() {
    this.showAdvert(this.companyId);
  },  
  methods: {
    //   切换广告
    toggle(H5OrApp){
        for( let i=0;i<10;i++){
            $('#title-span-' + i ).removeClass('multiple-line');
        }

        if( H5OrApp == 1 ){
            this.type_tab = true;
        } else if( H5OrApp == 2 ){
            this.type_tab = false;
        }
        this.showAdvert(this.companyId);
    },
    newAd() {
      this.foreShow = false;
      // 确保新增和修改广告操作没法同时进行
      $('#imageUrl-' + this.modifyIndex ).attr('src',this.cancel_AD_data.imageUrl);
      for( let i=0;i<this.ad_list_data.length;i++ ){
          if( $('#ad-content-edit-' + i ).is(':visible') == true ){
              $('#shadow-div-' + i ).hide();
              $('#ad-content-view-' + i ).show();
              $('#ad-content-edit-' + i ).hide();
              $('#btn-div-' + i ).hide();
              // 取消删除
          }
          $('#del-' + i ).hide(); // 确保删除和新增操作不能同时进行
      }
    },
    //   确定新增广告
    confirmAD(){
        if( !this.add_AD_data.imageUrl ){
            this.$message( this.$t("ad.PleaseAddAdvertisementPicture") );
            return;
        }
        if( !this.add_AD_data.description ){
            this.$message(this.$t("hint.pleaseEnter") + this.$t('ad.AdvertisementName').toLocaleLowerCase() );
            return;
        }
        if( !this.add_AD_data.industry ){
            this.$message(this.$t("placeH.Please") + this.$t('ad.BusinessNature').toLocaleLowerCase() );
            return;
        }
        this.add_AD_data.type = this.type_tab == true ? '1' : '0';
        this.add_AD_data.companyId = this.companyId;
        this.$msgbox({
            title: this.$t("hint.Alert"),
            message: this.$t("hint.confirmToLaunchThisAdvertisement"),
            showClose: false,
            showCancelButton: true,
            closeOnClickModal:false,
            confirmButtonText: this.$t("button.OK"),
            cancelButtonText: this.$t("button.Cancel"),
            beforeClose: (action, instance, done) => {
            if (action == "confirm") {
                addAdvert(this.add_AD_data).then(res=>{
                    if(res.code == 0){
                        this.$notify({
                            title: this.$t('hint.Success'),
                            message: this.$t('hint.OperationSuccess'),
                            type:'success',
                            duration: 2000
                        });
                        this.showAdvert(this.companyId);
                    }
                })
            }
            done();
            },
        }).catch(() => {});
        
    },
    //   取消新增
    cancelAdd(){
        this.foreShow = true;
        this.add_AD_data = {};
        $('#upload-concent').show();
        $("#changePic").hide();
        $(".add-div").css("background-color","transparent");
    },
    // 新增广告上传图片成功  
    addADSuccess(res){
        this.$set(this.add_AD_data,'imageUrl',res.value);
        $('#upload-concent').hide();
        $("#changePic").show();
        $(".add-div").css("background-color","rgba(0,0,0,.4)");
    },
    //   确定修改
    confirmModify(index){
        if( !this.modify_AD_data.imageUrl ){
            this.$message( this.$t("ad.PleaseAddAdvertisementPicture") );
            return;
        }
        if( !this.modify_AD_data.description ){
            this.$message(this.$t("hint.pleaseEnter") + this.$t('ad.AdvertisementName').toLocaleLowerCase() );
            return;
        }
        if( !this.modify_AD_data.industry ){
            this.$message(this.$t("placeH.Please") + this.$t('ad.BusinessNature').toLocaleLowerCase() );
            return;
        }
        this.$msgbox({
            title: this.$t("hint.Alert"),
            message: this.$t("ad.ConfirmtomodifytheAdvertisement"),
            showClose: false,
            showCancelButton: true,
            closeOnClickModal:false,
            confirmButtonText: this.$t("button.OK"),
            cancelButtonText: this.$t("button.Cancel"),
            beforeClose: (action, instance, done) => {
            if (action == "confirm") {
                this.cancelAdd();
                updateAd(this.modify_AD_data).then(res=>{
                    if( res.code == 0 ){
                        this.$notify({
                            title: this.$t('hint.Success'),
                            message: this.$t('hint.OperationSuccess'),
                            type:'success',
                            duration: 2000
                        });
                        this.showAdvert(this.companyId);
                    }
                })
            }
            done();
            },
        }).catch(() => {});
    },
    //   上传图片成功
    modifyADSuccess(res){
        $('#imageUrl-' + this.modifyIndex ).attr('src',res.value);
        this.modify_AD_data.imageUrl = res.value;
    },
    //   删除广告
    delAD(id,index){
        
        deleteAd(id).then(res=>{
            if(res.code == 0){
                this.$notify({
                    title: this.$t('hint.Success'),
                    message: this.$t('hint.OperationSuccess'),
                    type:'success',
                    duration: 2000
                });
                this.showAdvert(this.companyId);
            }
        })
    },
    // 显示或隐藏删除层
    showOrHideDelView(showOrHide,index){
        this.cancelAdd();
        if( showOrHide == '1' ){
            // 确保新增和修改广告操作没法同时进行
            $('#imageUrl-' + this.modifyIndex ).attr('src',this.cancel_AD_data.imageUrl);
            for( let i=0;i<this.ad_list_data.length;i++ ){
                if( $('#ad-content-edit-' + i ).is(':visible') == true ){
                    $('#shadow-div-' + i ).hide();
                    $('#ad-content-view-' + i ).show();
                    $('#ad-content-edit-' + i ).hide();
                    $('#btn-div-' + i ).hide();
                    // 取消删除
                }
                if(i != index) {
                  $('#del-' + i ).hide(); // 确保删除和新增操作不能同时进行
                }     
            }
            // 展示删除层
            $('#del-' + index ).show();
            this.delIndex = index;
        } else if( showOrHide == '2' ){
            // 取消删除
            $('#del-' + index ).hide();
            this.delIndex = null;
        } 
        
    },
    //   修改广告
    modifyOrCancelAD(modifyOrCancel,index,item){
        if( modifyOrCancel == '1' ){
            this.cancelAdd(); // 确保新增和修改操作不能同时进行
            $('#imageUrl-' + this.modifyIndex ).attr('src',this.cancel_AD_data.imageUrl);
            for( let i=0;i<this.ad_list_data.length;i++ ){
                if( $('#ad-content-edit-' + i ).is(':visible') == true ){
                    $('#shadow-div-' + i ).hide();
                    $('#ad-content-view-' + i ).show();
                    $('#ad-content-edit-' + i ).hide();
                    $('#btn-div-' + i ).hide();
                }
                $('#del-' + i ).hide(); // 确保删除和新增操作不能同时进行
            }
            // 修改
            this.modifyIndex = index;
            $('#shadow-div-' + index ).show();
            $('#ad-content-view-' + index ).hide();
            $('#ad-content-edit-' + index ).show();
            $('#btn-div-' + index ).hide();
            this.modify_AD_data = this.copy(item);
            this.cancel_AD_data = this.copy(item);
        } else if( modifyOrCancel == '2' ){
            // 取消
            $('#shadow-div-' + index ).hide();
            $('#ad-content-view-' + index ).show();
            $('#ad-content-edit-' + index ).hide();
            $('#btn-div-' + index ).hide();
            $('#imageUrl-' + this.modifyIndex ).attr('src',this.cancel_AD_data.imageUrl);
            this.modify_AD_data = {};
            this.modifyIndex = null;
        } 
    },
    //   展示svg
    showOrHideSvg(showOrHide,index) {
        if( $('#ad-content-edit-' + index ).is(':visible') == true ) return;
        if( showOrHide == 1 ){
            // 鼠标移入
            $('#btn-div-' + index ).show();
        } else if( showOrHide == 2 ){
            // 鼠标移出
            $('#btn-div-' + index ).hide();
        }
    },
    // 浅拷贝对象
    copy(obj){
        let newobj = {};
        for ( let attr in obj) {
            newobj[attr] = obj[attr];
        }
        return newobj;
    },
    // 限制上传图片大小
    beforeImgUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message(this.$t("hint.ThePictureSizeMustNotExceed5M"));
      }
      return isLt5M;
    },
    // 展示付款成功广告
    showAdvert(id) {
        const _that = this;
        // type_tab true支付页 falseapp首页;  method 1 支付页广告 2 app首页广告;  num 10支付页 3首页广告
        let method = this.type_tab ? selectAdList : getAdvert_home;
        let num = this.type_tab ? 10 : 3;
        method(id).then(res => {
            if( res.code == 0 ){
                this.ad_list_data = res.value;

                // 初始化新增修改删除
                if( !this.foreShow ){
                    $('#upload-concent').show();
                    $("#changePic").hide();
                    $(".add-div").css("background-color","transparent");
                    this.foreShow = true;
                    this.add_AD_data = {};
                }
                
                if( this.modifyIndex != null ){
                    $('#shadow-div-' + this.modifyIndex ).hide();
                    $('#ad-content-view-' + this.modifyIndex ).show();
                    $('#ad-content-edit-' + this.modifyIndex ).hide();
                    $('#btn-div-' + this.modifyIndex ).hide();
                    this.modify_AD_data = {};
                    this.cancel_AD_data = {};
                }
                if( this.delIndex != null ){
                    $('#del-' + this.delIndex ).hide();
                }
                

                if(this.userPhone === '13501189583' || this.userPhone === '15018955912' || this.userPhone === '15219441946'){
                this.show_new_AD = false;
                } else {
                this.show_new_AD = this.ad_list_data.length < num;
                }
                
                setTimeout(function(){
                    for( let i=0;i<_that.ad_list_data.length;i++){
                        if( _that.getStrL( $('#title-span-' + i ).html() ) >= 37 ){
                            $('#title-span-' + i ).addClass('multiple-line');
                        }
                        if( _that.getStrL( $('#ad-link-' + i ).html() ) >= 25 ){
                            $('#ad-link-' + i ).addClass('multiple-line');
                        }
                    }
                },300)
            }
        });
    },
    // 判断字符串长度的方法
    getStrL(str){
        let l = str.length; 
        let blen = 0; 
        for(let i=0; i<l; i++) { 
            if ((str.charCodeAt(i) & 0xff00) != 0) { 
            blen ++; 
            } 
            blen ++; 
        }
        return blen;
    },
  }
};
</script>

<style>
</style>